/*
jq选择器:

$('p') 元素名选择器;选取所有 p元素
$('#id') id选择器
$('.cls') class选择器
$("p.intro") 选取p元素中class=intro的元素
$('[href]') 属性选择器;选择所有具有href属性的元素
$("[value='name']") 属性选择器;选择属性value的值等于name的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素

jq的事件:
鼠标事件:
click 点击事件
mouseenter 相当于mouseover
mouseup
mouseleave 鼠标离开
mousedown

hover 用于模拟 mouseenter和mouseleave
$("#p1").hover(function(){alert("mouseenter")},function (){alert("mouseleave")});

*/

$(document).ready(function (){
    $("#p1").html("哈哈哈哈");
    $("#p1").click(function (){
        alert("点击了段落1");
        //$(this).hide();
        //$(this).toggle(500,cb);
    });
    var cb; //最后一个参数是可选的回调函数
    //淡入淡出
    $("#fade").click(function (){
        $("#p3").fadeToggle();
        var speed = 500; //ms
        $("#p4").fadeTo(speed,0.5);        
    });
    
    //滑动效果(比如做收缩菜单)
    $("#slide").click(function (){
        var speed = 200; //ms
        //$("#slideContent").slideDown(speed); //还有一个callback参数
        $("#slideContent").slideToggle(speed);
    });
    
    //动画函数 animate
    $("#animateBtn").click(function (){
        //+= -=是设置相对位置,
        var param = {left:"+=200px",top:"+=100px",opacity:'0.5',width:'200px'};
        var speed = 250;//ms
        var cb; //最后一个参数是可选的回调函数
        $("#animate").animate(param,speed);        
        $("#animate").animate({height:'+=20px'},speed); //多次调用即系设置了队列动画
        //停止动画;所有通过效果函数都通用包括淡入淡出 滑动 animate;
        //$("#animate").stop( stopAll,gotoEnd);// stopAll:是否停止所有已经应用的动画队列默认false,gotoEnd是否完成动画效果默认false
    });
    
    //jq操作dom和css  
    $("#domTestBtn").click(function (){
        //alert("text:"+$("#p4").text()); //设置或返回元素内纯文本
        //alert("html:"+$("#p4").html()); //设置或返回元素内包括html标记的文本
        //alert("val:"+$('#inp_name').val()); //设置或返回表达字段值
        //alert("attr:"+$('#inp_name').attr('id')); //获取指定属性值
        $('#inp_name').attr('id','aaa'); //设置指定属性
        
        //html text val attr三个方法设置回调函数,使用方法一样
        $("#p4").text(function (i,oldText){
            //alert("i="+i);
            return oldText+"_后来加的文本"; //返回的文本会直接赋值
        });
        
        /*
        $("#domTestDiv").css("width","200px");
        $("#domTestDiv").css("height","200px");
        $("#domTestDiv").css("background-color","#f6c87b");
        */
        //设置多个css属性的语法,相当于json串
        $("#domTestDiv").css({'width':"200px",'height':"100px",'background-color':"#f6c87b"});
        //$("#domTestDiv").addClass("cls1 cls2"); //添加css类样式
        //$("#domTestDiv").removeClass("cls1"); //删除类样式
    });
    
    //jq遍历节点
    $("#loopBtn").click(function ()
    {        
        $('#loopTest ul').css({'list-style':"none",'padding':'0'});
        $('#loopTest ul li').parent().css({"border":"2px solid #ff0000"}); //获取最直接的父级
        //方法返回介于两个给定元素之间的所有祖先元素;例子中不包括div元素
        $("#loopTest ul li span").parentsUntil("div").css({"color":"red","border":"1px solid #00ff00"});
        $("#loopTest ul").children("li").css({"color":"#cccccc"}); //遍历后代 参数为空的话 遍历所有后代
        $("div").find("span"); // 方法返回被选元素的后代元素，一路向下直到最后一个后代。
        $("div").find("*"); //查找所有后代 
        //jQuery 遍历 - 同胞 即系拥有相同父元素的元素
    });
    
    
    

    
});